<template>
    <div>
        <div class="detail">
            <div class="common-form">
                <!-- 轮播 -->
                <div style="width:100%;margin-bottom:5%;" class="bannerH">
                    <!-- Using the slider component -->
                    <slider ref="slider" :options="options">
                        <!-- slideritem wrapped package with the components you need -->
                        <slideritem v-for="(item,index) in someList" :key="index" :style="item.style">
                            <img :src="url + item"/>   
                        </slideritem>
                        <!-- Customizable loading -->
                        <div slot="loading">loading...</div>
                    </slider>
                </div>
                <div class="detail-tel">
                    <p><em class="vip-em">限量秒杀</em></p>
                    <p>{{VipDetail.goods_title}}</p>
                    <span @click="addCollection"><i></i>收藏</span>
                </div>
                <div class="detail-price">
                    <p>价格：￥{{VipDetail.market_price}}</p>
                    <p>秒杀价：￥<em>{{VipDetail.price}}</em></p>
                </div>
                <div class="detail-other">
                    <em>邮费：0.00</em>
                    <em>销量：{{VipDetail.has_sold}}</em>
                    <em>库存：{{VipDetail.inventory}}</em>
                </div>
            </div>
            <!-- 充值 -->
            <div class="vip-recharge">
                <a class="detail-recharge" >
                    充值 充值会员  尊享3大权益<i>&gt;</i>
                </a>
            </div>
            <!-- 服务 -->
            <div class="common-form">
                <div class="detail-service">
                    <span><em></em>服务</span> 100%正品·品牌授权·48小时发货
                </div>
            </div>
            <!-- 公共标题 -->
            <div class="common-tel">
                进入店铺
                <div class="common-tel-dot">
                    <em></em>
                    <em></em>
                    <em></em>
                </div>
                <!-- <a href="#">查看全部评价<i>&gt;</i></a> -->
            </div>
            <!-- 评价 
            <div class="common-form">
                <div class="detail-evaluate">
                    <div class="detail-evaluate-img">
                        <img src="build/img/1.jpg"/>
                    </div>
                    <div class="detail-evaluate-text">
                        <p>小丸子</p>
                        <p>北欧风格的餐具真的很棒、样式也很精致！敲喜欢的！很适合整个餐桌的风格</p>
                    </div>
                </div>
                <div class="detail-evaluate">
                    <div class="detail-evaluate-img">
                        <img src="build/img/2.jpg"/>
                    </div>
                    <div class="detail-evaluate-text">
                        <p>小丸子</p>
                        <p>北欧风格的餐具真的很棒、样式也很精致！敲喜欢的！很适合整个餐桌的风格</p>
                    </div>
                </div>
            </div>-->
            <!-- 店铺 -->
            <div class="common-form">
                <router-link :to="'/Shop/' + VipDetail.merchant_id" class="detail-shop">
                    <div class="detail-shop-img"><img :src="url + shop_Info.logo"/></div>
                    <div class="detail-shop-text">
                        <div class="detail-shop-text-tel">{{shop_Info.merchant_name}}}<a>进店逛逛</a></div>
                        <div class="detail-shop-text-other">
                            <!-- <span>商品描述  <em>4.98</em></span>
                            <span>卖家服务  <em>4.98</em></span>
                            <span>物流服务  <em>4.98</em></span> -->
                        </div>
                    </div>
                </router-link >
            </div>
            <!-- 公共标题 -->
            <div class="common-tel">
                商品详情
                <div class="common-tel-dot">
                    <em></em>
                    <em></em>
                    <em></em> 
                </div>
            </div>
            <!-- 商品简介 -->
            <div class="common-form">
                <div class="detail-info"  v-html="VipDetail.content">	
                    <!-- {{VipDetail.content}} -->
                    <!-- <img src="build/img/detail_1.jpg" >
                    <img src="build/img/detail-2.jpg" >
                    <img src="build/img/detail-3.jpg" >
                    <img src="build/img/detail-4.jpg" > -->
                </div>
            </div>
            <div class="footer-100"></div>
            <!-- 详情底部 -->
            <div class="detail-footer">
                <a @click="switchTo('/Home')"><i></i><p>首页</p></a>
                <a @click="kefu"><i></i><p>客服</p></a>
                <a class="vip-btn" @click="seleceGg($event)">立即秒杀</a>
            </div>
            <!-- 客服弹框 -->
            <!-- 弹框 -->
            <div class="black" v-show="tan"></div>
            <div class="rule" v-show="tan2">
                <p class="ruleTel">客服电话</p>
                <div>
                    <!-- <p>已经领了2次了，分享可在领一次</p> -->
                    <p class="ruleText">18526793565</p>
                    <div class="ruleBtn">
                        <!-- <a class="link">确定</a> -->
                    </div>
                </div>
                <i @click="times">&times;</i>
            </div>
            <!-- 选择规格 -->
            <div class="black" v-show="isShow"  @click="black" ></div>
            <div class="footer-standard"  v-show="isShow2">
                <div class="footer-standard-shop">
                    <img :src="VipDetail.thumbnail" alt="" />
                    <div>
                        <p>￥<em>{{VipDetail.market_price}}</em></p>
                        <!-- <p><em>选择</em>：餐具套装（2人装），白色，1件</p> -->
                    </div>
                </div>
                <div class="footer-shuxing">
                    <div class="footer-standard-num">
                        <p>{{VipDetail.spec_name1}}</p>
                        <div>
                            <em v-for="(item,index) in attr" :class="activeClass == index ? 'active':''" :key="index" @click="getItme(index,$event)">{{item.spec_1}}</em>
                        </div>
                    </div>
                    <div class="footer-standard-num">
                        <p>{{VipDetail.spec_name2}}</p> 
                        <div>
                            <em  v-for="(item,index) in spec2" :class="activeClass2 == index ? 'active':''" :key="index" @click="getspec2(index,item.id)">{{item.spec_2}}</em>
                        </div>
                    </div>
                </div>
                <!-- <div class="footer-standard-num">
                    <p>数量</p> 
                    <div class="goods-num">
                        <span class="sub" @click="sub">-</span>
                        <span class="num"><input type="text"  disabled="disabled" v-model="num"/></span>
                        <span class="add" @click="add">+</span>
                    </div>
                </div> -->
                
                <!-- <router-link  :to="{path:'/Corder/' + VipDetail.id +'/'+ specT}" class="detail-btn">确定{{VipDetail.id}}</router-link> -->
                <button class="detail-btn" @click="confirm(VipDetail.id)">确定</button>
            </div>
            
        </div>
    </div>
</template>

<script>
import { slider, slideritem } from 'vue-concise-slider'
import qs from 'qs'
import wx from 'weixin-jsapi'
import url from 'url'
    export default {
        name:'SpikeDetail',
        data () {
            return {
                tan:false,
                tan2:false,
                isShow:false,
                isShow2:false,
                activeClass: -1,
                activeClass2:-1,
                num:1,
                url:'http://api.huiwanzhong365.com',
                // 轮播
                someList:[],
                //Slider configuration [obj]
                options: {
                    currentPage: 0
                },
                // 商品详情
                VipDetail:{
                    goods_title:'',//商品名称
                    price:'',//会员价
                    market_price:'',//市场价
                    inventory:'',//库存
                    content:'',//商品内容
                    spec_name1:'',//规格名称
                    spec_name2:'',//规格名称
                    thumbnail:'',//商品图片
                    has_sold:'',//已售数量
                    merchant_id:'',
                    spec_type:'',//属性值
                },
                attr:[],
                merchantID:'',
                // attr2:[],
                spec2:[],
                specO:'', //规格1
                specT:'', //规格2
                shop_Info:{},//店铺信息
            }
        },
        components: {
            slider,
            slideritem
        },
        methods:{
            switchTo(path){
                // console.log(this.$router)
                this.$router.push(path)
            },
            //商品详情
            detail:function(){
                // var uo = url.parse(window.location.href, true)
                // console.log(uo)
                //console.log(this.$route.params.id)
                var that = this
                var openid = localStorage.getItem("openid")
                var draw = { 
                    openid:openid,
                    goods_type:0,
                    goods_id:this.$route.params.id
                }
                that.$http.post('/index/merchant/goods/read',qs.stringify(draw)).then(res=>{
                    console.log(res.data)
                    res.data.list.thumbnail = this.url + res.data.list.thumbnail 
                    res.data.list.img_url = res.data.list.img_url.split(',')
                    
                    this.VipDetail = res.data.list;
                    this.attr = res.data.attr
                    this.spec2 = res.data.attr2
                    this.someList = res.data.list.img_url
                    //console.log(this.VipDetail.spec_type)
                    this.merchantID = res.data.list.merchant_id
                    console.log(this.merchantID)
                    this.shopInfo(this.merchantID)
                }).catch(err=>{
                    console.log(err)
                })
            },
            //规格弹框
            seleceGg:function(e){
                
                //console.log(this.VipDetail.spec_type)
                if( this.VipDetail.spec_type == 1){
                    this.isShow = true;
                    this.isShow2 = true
                    console.log(this.isShow2)
                }else{
                    console.log(456)
                    this.$router.push({path:'/seckillOrder',query:{ id : this.$route.params.id,s:this.specT,quantity:this.num}});
                }
            },
            //隐藏规格
            black:function(){
                this.isShow = false;
                this.isShow2 = false;
                this.tan = false;
                this.tan2 = false
            },
            //选规格
            getItme(index,e) {
                this.activeClass = index; 
                this.specO = e.target.innerHTML
                //console.log(this.specO)
                var that = this
                var openid = localStorage.getItem("openid")
                var draw = { 
                    openid:openid,
                    goods_id:this.$route.params.id,
                    spec_1:e.target.innerHTML
                }
                that.$http.post('/index/merchant/goods/attrDetails',qs.stringify(draw)).then(res=>{
                    console.log(res.data)
                    this.spec2 = res.data
                }).catch(err=>{
                    console.log(err)
                })
            },
            //子规格
            getspec2:function(index,e){
                this.activeClass2 = index; 
                this.specT = e
                console.log(e)
            },
            //添加商品数量
            add:function(){
                this.num ++
            },
            //减少商品
            sub:function(){
                if(this.num == 1){
                    this.num == 1
                }else{
                    this.num --
                }
            },
            //添加收藏
            addCollection:function(){ 
                var that = this
                var openid = localStorage.getItem("openid")
                var draw = { 
                    openid:openid,
                    goods_id:this.$route.params.id,
                    merchant_id:this.VipDetail.merchant_id,
                    type:0,
                }
                that.$http.post('/index/user/addCollection',qs.stringify(draw)).then(res=>{
                    //console.log(res.data)
                    //alert(res.data.info)
                    layer.msg(res.data.info);
                }).catch(err=>{
                    console.log(err)
                })
            },
            //获取商家头像和名称
            shopInfo:function(id){
                // /index/merchant/MerchantLogo
                var that = this
                console.log(this.VipDetail.merchant_id)
                var openid = localStorage.getItem("openid")
                var draw = { 
                    openid:openid,
                    merchant_id:1,
                }
                that.$http.post('/index/merchant/MerchantLogo',qs.stringify(draw)).then(res=>{
                    console.log(res)
                    this.shop_Info = res.data
                    // this.shop_Info.logo = res.data.logo
                }).catch(err=>{
                    console.log(err)
                })
            },
            //客服弹框
            kefu:function(){
                this.tan = true
                this.tan2 = true
            },
            times:function(){
                this.tan = false
                this.tan2 = false
            },
            // 规格
            confirm:function(id){
                if( this.specT == ''){
                    layer.msg('请选择规格');
                }else{
                    this.$router.push({path:'/seckillOrder',query:{ id : this.$route.params.id,s:this.specT,quantity:this.num}});
                }
            },
            //加入购物车
            // shopCart:function(){
            //     var that = this

            //     if( this.VipDetail.spec_type == 1){
            //         this.isShow3 = true;
            //         this.isShow4 = true
            //     }else{
            //         layer.msg('添加成功');
            //     } 
            // },
            // close:function(id){
            //     var that = this
            //     console.log(this.specT)
            //     if( this.specT == ''){
            //         layer.msg('请选择规格');
            //     }else{
            //         this.isShow3 = false;
            //         this.isShow4 = false;
            //         console.log(this.VipDetail.merchant_id)
            //         var openid = localStorage.getItem("openid")
            //         var draw = { 
            //             openid:openid,
            //             goods_id:id,
            //             attr_id:this.specT,
            //             quantity:this.num
            //         }
            //         that.$http.post('/index/user/addShoppingCart',qs.stringify(draw)).then(res=>{
            //             console.log(res)
            //             layer.msg(res.data.info);
            //             //this.shop_Info.logo = res.data.logo
            //             // this.shop_Info.logo = res.data.logo
            //         }).catch(err=>{
            //             console.log(err)
            //         })
            //     }
                
            // }
        },
        mounted(){
            this.detail();
            //this.shopInfo();
            var bannerW = $('.bannerH').width();
            console.log(bannerW)
            $('.bannerH').height(bannerW)
        }
    }
</script>

<style scoped>
.footer-shuxing{
    max-height: 350px;
    overflow: auto;
    width: 100%;
}
.black{
    background:rgba(0, 0, 0, 0.3);
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index: 19;
}
.rule{
    position: fixed;
    width: 80%;
    top: 30%;
    left: 10%;
    background: #FFF;
    border-radius: 5px;
    overflow: hidden;
    z-index: 20;
    text-align: center;
}
.ruleTel{
    font-size:18px;
    font-weight: 600;
    margin-top:15px;
}
.ruleText{
    font-size:13px;
    margin-top:15px;
    width:94%;
    margin-left:3%;
    line-height: 24px;
    color:#999;
}
.rule p:nth-child(4){
    font-size:12px;
    text-align: center;
    margin-top:10px;
    margin-bottom: 15px;
}
.rule p:nth-child(4) a{
    color:#259B24;
}
.rule i{
    color:#FFF;
    background: #BBB;
    width:20px;
    height:20px;
    border-radius: 50%;
    text-align: center;
    font-size:16px;
    position: absolute;
    top:10px;
    right: 10px;
    line-height: 20px;
}
.ruleBtn{
    margin-top:15px;
}

.link{
    width: 100px;
    text-align: center;
    height: 34px;
    color: #FFF;
    border-radius: 5px;
    background: #000;
    border: 0;
    display: inline-block;
    line-height: 38px;
    margin-bottom: 15px;
}
.slider-active img{
    width:100%;
    height:100%;
}
.detail-btn{
    display: inline-block;
    line-height: 56px;
}
.black{
	position: fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9;
	/* display: none; */
}
.vip-btn{
    color: #FFF !important;
    width: 70% !important;
    height: 56px !important;
    line-height: 56px !important;
    background: #FE2746 !important;
}
.vip-em{
    width: 76px;
    height: 26px;
    line-height: 26px;
    border-radius: 5px;
    background-color:#FE2746;
    text-align: center;
    color: #FFF;
    font-weight: 600;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
}
.vip-recharge{
	width:94%;
	margin:0 auto;
	height: 38px;
	line-height: 38px;
	border-radius: 5px;
	background-color: rgba(252, 40, 71, 1);
	margin-top:10px;
}
.vip-recharge a{
	color:#FFF;
	font-weight: 600;
	padding: 0 10px
}
.vip-recharge i{
	color: #FFF;
    float: right;
    padding: 0 8px;
    font-size: 14px;
}
.detail-footer a:nth-child(1),.team-footer a:nth-child(1){
	width:15%;
	float: left;
	text-align: center;
}
.detail-footer a:nth-child(1) i,.team-footer a:nth-child(1) i{
	display: inline-block;
    height: 21px;
    width: 22px;
    overflow: hidden;
    margin-top: 2px;
    background: url(../../../assets/index.png)  no-repeat;
    background-size:100%;
    margin-top:8px;
}
.detail-footer a:nth-child(2) i,.team-footer a:nth-child(2) i{
	display: inline-block;
    height: 21px;
    width: 22px;
    overflow: hidden;
    margin-top: 2px;
    background: url(../../../assets/kefu.png)  no-repeat;
    background-size:100%;
    margin-top:8px;
}
.detail-footer a:nth-child(2),.team-footer a:nth-child(2){
	width:15%;
	float: left;
	text-align: center;
}
.detail-footer a:nth-child(3) i{
	display: inline-block;
    height: 21px;
    width: 22px;
    overflow: hidden;
    margin-top: 2px;
    background: url(../../../assets/shop.png)  no-repeat;
    background-size:100%;
    margin-top:8px;
}
.detail-footer a:nth-child(3){
	width:25%;
	float: left;
    text-align: center;
    background: #EBEBEB; 
    color: #333;
    height: auto;
    line-height: 20px;
    height: auto;

}
.detail-footer a:nth-child(4){
	width:45%;
	float: left;
	background: #FE2746 ;
	color:#FFF;
	text-align: center;
	height: 48px;
	line-height: 48px;
	height:48px;
	color:#FFF;
}
.detail-tel span {
    font-size: 12px;
    color: #999;
    float: right;
    margin-top: -85px;
}



</style>